<template>
  <card-box title="AI服务分析">
    <div class="ai-service-info">
      <div class="chart" ref="chart"></div>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import CardBox from './common/CardBox.vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
export default {
  mixins: [CommonMixin],
  data() {
    return {
      code: 'AISERVICE',
      loading: false,
      list: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      this.list = dataResult
      this.renderChart()
    },
    renderChart() {
      this.$nextTick(() => {
        const chart = this.$refs.chart;
        const myChart = echarts.init(chart)
        window.addEventListener('resize', myChart.resize)
        const list = this.list.map(item => {
          return {
            value: item.use_number,
            name: item.keyword
          }
        })
        const _this = this
        const options = {
          tooltip: {
            show: true,
            borderColor: 'rgba(0, 105, 253, 1)',
            borderWidth: 1,
            padding: [10, 15, 10, 15],
            confine: true,
            backgroundColor: 'rgba(7, 56, 142, 1)',
            textStyle: {
              color: '#ffffff',
              lineHeight: 22
            },
            extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;',
            formatter: function(params) {
              // console.log(params)
              if(params && params.data) {
                return `${params.marker} ${params.data.name} ${_this.formatNumberWithCommas(params.data.value)}次`
              }
              return '内容'
            }//`{b} {c}次`
          },
          series: [
            {
              type: 'wordCloud',
              // The shape of the "cloud" to draw. Can be any polar equation represented as a
              // callback function, or a keyword present. Available presents are circle (default),
              // cardioid (apple or heart shape curve, the most known polar equation), diamond (
              // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

              shape: 'pentagon',

              // A silhouette image which the white area will be excluded from drawing texts.
              // The shape option will continue to apply as the shape of the cloud to grow.

              // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
              // Default to be put in the center and has 75% x 80% size.

              left: 'center',
              top: 'center',
              width: '100%',
              height: '100%',
              right: null,
              bottom: null,

              // Text size range which the value in data will be mapped to.
              // Default to have minimum 12px and maximum 60px size.

              sizeRange: [10, 36],

              // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

              rotationRange: [0, 0],
              rotationStep: 0,

              // size of the grid in pixels for marking the availability of the canvas
              // the larger the grid size, the bigger the gap between words.

              gridSize: 25,

              // set to true to allow word being draw partly outside of the canvas.
              // Allow word bigger than the size of the canvas to be drawn
              drawOutOfBound: false,

              // If perform layout animation.
              // NOTE disable it will lead to UI blocking when there is lots of words.
              layoutAnimation: true,

              // Global text style
              textStyle: {
                fontFamily: 'PingFangSC-Semibold',
                // fontWeight: 600,
                color: function (params) {
                  let colors = ['#fe9a8bb3', '#fe9a8bb3', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                  return colors[parseInt(Math.random() * 10)];
                },
              },
              emphasis: {
                focus: 'none',
              },

              // Data is an array. Each array item must have name and value property.
              data: list,
            },
          ],
        };
        myChart.setOption(options)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ai-service-info {
  height: tvh(248);
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>